<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #FF5C82;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/GravidaList/'+ groupId }">档案管理</el-breadcrumb-item>
    <el-breadcrumb-item>BMI分析</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>
    <el-button :icon="Expand" style="color: white;background: #FF5C82" round @click="pageList">
      档案列表
    </el-button>
    <span class="onBtnRight"  @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>

  <GravidaLeft></GravidaLeft>

  <el-card class="right-box-card">
      <div class="zhi">您的BMI值为</div>
      <div class="zhis">
        <span>{{bmi}}</span>
        <span>{{bmi_c}}</span>
      </div>
      <div class="fen">
        <div class="fens">
<!--           <img src="../assets/img/Evaluation_Result_biao.svg" alt="" :style="{'margin-left':'93%','margin-top':'-100%'}">-->
        </div>
        <div class="fenss">
          <div class="one"></div>
          <div class="one">18.5</div>
          <div class="one">24.0</div>
          <div class="one">28.0</div>
        </div>
        <div class="fensss">
          <div class="one"><div class="lei" :style="{'background':'#5394D0'}">偏瘦</div></div>
          <div class="one"><div class="lei" :style="{'background':'#67C23A'}">正常</div></div>
          <div class="one"><div class="lei" :style="{'background':'#E2CB50'}">偏胖</div></div>
          <div class="one"><div class="lei" :style="{'background':'#E27350'}">肥胖</div></div>
        </div>
      </div>
  </el-card>



</template>

<script setup>
import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
import Header from './common/Header.vue';
import GravidaLeft from './common/GravidaLeft.vue';
import {useRoute, useRouter} from "vue-router"
import http from "../utils/http";
import Drawer from './common/Drawer.vue';
import {ElMessage} from "element-plus";
const route = useRoute()
const router = useRouter()
const labName = ref()
const groupId = ref()
const id = ref()
const bmi = ref()
const bmi_c = ref()


const pageList = async () => {
  await router.push({'path': '/GravidaList/' + groupId.value})
}


const onHome = async () => {
  await router.push({'path': '/Home'})
}

const fetchData = async () => {
  if(route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    if(groupId.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if(groupId.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if(groupId.value == 6) {
      labName.value = '成年人营养测评'
    } else if(groupId.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (groupId.value == 8) {
      labName.value = '团体营养测评'
    } else {
      labName.value = '婴幼儿营养测评'
    }

    http.get('api/archives/getbmi?id='+ id.value).then((res)=>{
      window.localStorage.setItem("reportId", res.data.data.reportId);
      bmi.value = res.data.data.bmi
      if(bmi.value<18.5){
        bmi_c.value = '偏瘦'
      }else if(bmi.value<24&&bmi.value>=18.5){
        bmi_c.value = '正常'
      }else if(bmi.value<28&&bmi.value>=24){
        bmi_c.value = '偏胖'
      }else if(bmi.value>=28){
        bmi_c.value = '肥胖'
      }
    })
  } else {
    ElMessage.error('栏目编号不得为空')
    await router.push({'path': '/Home'})
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
@import '../assets/css/common.css';
.BMIprimary {
  width: 268px;
  height: 70px;
  background: #FF5C82;
  opacity: 1;
  border-radius: 8px;
  font-size: 24px;
}
.BMIDefault {
  width: 268px;
  height: 70px;
  background: #fff;
  opacity: 1;
  color: #FF5C82;
  border-radius: 8px;
  font-size: 24px;
  border:1px solid #FF5C82;
}


::v-deep .el-button:focus, .el-button:hover {
  background: #FF5C82;
  color: #fff;
}
::v-deep  .el-progress-bar__inner {
  background: #FF5C82;
}
</style>
<style>
.right-box-card {
  margin-left: 2%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  width: 60%;
  float: left;
  min-height: 650px;
}
.right-box-card .zhi {
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-weight: 900;
  font-size: 18px;
  text-align: center;
  color: #606266;
  margin-top: 15%;
}

.right-box-card .zhis {
  width: 100%;
  height: 67px;
  line-height: 67px;
  font-weight: 900;
  font-size: 48px;
  text-align: center;
  color: #E2CB50;
}

.right-box-card .zhis span:nth-child(1) {
  margin-right: 24px;
  color: #303133;
}

.right-box-card .fen {
  width: 100%;
  height: 30px;
  padding: 0 270px;
  box-sizing: border-box;
  margin-top: 99px;
}

.right-box-card  .fen  .fens {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #5394D0 12.5%, #67C23A 37.5%, #E2CB50 62.5%, #E27350 87.5%);
  border-radius: 25px;
  position: relative;
}
.right-box-card  .fen  .fens .img{
  margin-top: -100%;
}
.right-box-card .fen .fenss {
  width: 100%;
  height: 100%;
  position: relative;
  top: -30px;
  padding: 2px 0;
  box-sizing: border-box;
  display: flex;
  line-height: 26px;
}

.right-box-card .fen .fenss .one{
  flex: 1;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  padding-left: 6px;
  box-sizing: border-box;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}

.right-box-card .fen .fenss .one:last-child {
  border: none;
}

.right-box-card .fen .fensss {
  width: 100%;
  height: 37px;
  position: relative;
  top: -20px;
  display: flex;
}

.right-box-card .fen .fensss .one {
  flex: 1;
}

.right-box-card .fen .fensss .one .lei {
  width: 68px;
  height: 37px;
  margin: 0 auto;
  text-align: center;
  line-height: 37px;
  border-radius: 40px;
  font-size: 18px;
  color: #ffffff;
}
</style>
